<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态绑定 style 三目运算符语法</title>
</head>
<body>
<div id="app">
  <h1 style="color: red; text-decoration: underline">Hello, World！</h1>
  <h1 v-bind:style="{color: true?'red':'silver'}">Hello, World</h1>
  <h1 v-bind:style="{textDecoration: true?'underline':'underline double'}">Hello, World</h1>

  <h1 v-bind:style="{color: true?'red':'silver', textDecoration: true?'underline':'underline double'}">Hello, World</h1>
  <h1 v-bind:style="{color: isColorDecorated?'red':'silver', textDecoration: isTextDecorated?'underline':'underline double'}">Hello, World</h1>
</div>

<script src="../../../../../js/vue.global.js"></script>
<script >

   const app = Vue.createApp({
    data(){
      return {
          isColorDecorated:true,
          isTextDecorated:true,
      }
    }
  })

  app.mount("#app")
</script>
</body>
</html>